<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          v-hasPermi="['cancel:supplier:order:addDelivery']"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column align="center" prop="batchNo" label="批次号">
      </el-table-column>
      <el-table-column align="center" prop="deliveryTypeName" label="发货类型">
      </el-table-column>
      <el-table-column align="center" label="发货状态">
        <template slot-scope="scope">
          <el-tag type="primary">{{ scope.row.stateName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="物流公司" prop="logisticsCompany">
      </el-table-column>
      <el-table-column align="center" label="物流单号" prop="logisticsNumber">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handldeFahuo(scope.row)"
            v-if="scope.row.state == 0"
            v-hasPermi="['cancel:supplier:order:submitDelivery']"
            >提交发货单</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handldeDetail(scope.row)"
            v-hasPermi="['cancel:supplier:order:getDeliveryDetail']"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="发货单"
      :visible.sync="openAdd"
      width="1200px"
      append-to-body
    >
      <el-form ref="form" :model="formOne" label-width="110px">
        <el-table
          :data="goodsList"
          style="width: 100%"
          border
          :span-method="spanMethod"
          @selection-change="handleSelectionChange"
        >
          <!-- 多选框 -->
          <el-table-column type="selection" width="55"></el-table-column>
          <!-- 商品 -->
          <el-table-column prop="productName" label="商品"> </el-table-column>
          <!-- 图片 -->
          <el-table-column prop="previewImg" label="图片">
            <template slot-scope="scope">
              <el-image
                style="width: 100px"
                :src="scope.row.previewImg"
                fit="fit"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="buyNum" label="数量"> </el-table-column>
          <!-- 发货类型 -->
          <el-table-column prop="deliveryTypeName" label="发货类型">
            <template #default="scope">
              <!-- 只在第一行显示 el-select -->
              <template v-if="isFirstRow(scope.$index)">
                <el-form-item label="" label-width="0" prop="deliveryType">
                  <el-select
                    v-model="formOne.deliveryType"
                    placeholder="请选择发货类型"
                  >
                    <el-option label="首次" :value="1"></el-option>
                    <el-option label="补发" :value="2"></el-option>
                    <el-option label="换货" :value="3"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </template>
          </el-table-column>
          <!-- 备注 合并单元格为goodsList的长度 -->
          <el-table-column prop="remark" label="备注">
            <template #default="scope">
              <template v-if="isFirstRow(scope.$index)">
                <el-form-item label-width="0" label="" prop="remark">
                  <el-input
                    v-model="formOne.remark"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入备注"
                  ></el-input>
                </el-form-item>
              </template>
            </template>
          </el-table-column>
        </el-table>

        <el-form-item>
          <!-- <el-select v-model="goodsIds" multiple placeholder="请选择">
            <el-option
              v-for="item in goodsList"
              :key="item.id"
              :label="item.productName"
              :value="item.id"
            >
            </el-option>
          </el-select> -->
        </el-form-item>
        <!-- 备注 -->
        <!-- <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formOne.remark"
            type="textarea"
            :rows="2"
            placeholder="请输入备注"
          />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="openAdd = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 提交发货单 -->
    <el-dialog
      title="提交发货单"
      :visible.sync="openSub"
      width="500px"
      append-to-body
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="110px">
        <el-form-item label="物流公司" prop="logisticsCompany">
          <el-select
            v-model="form.logisticsCompany"
            placeholder="请选择物流公司"
          >
            <el-option
              v-for="item in companyList"
              :key="item.id"
              :label="item.logisticsName"
              :value="item.logisticsName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号" prop="logisticsNumber">
          <el-input
            v-model="form.logisticsNumber"
            placeholder="请输入物流单号"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFahuo">确 定</el-button>
        <el-button @click="openSub = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 查看发货详情 -->
    <el-dialog
      title="发货详情"
      :visible.sync="openDetail"
      width="1000px"
      append-to-body
    >
      <div>
        <div class="goods-list">
          <div
            class="goods-item"
            v-for="item in supDetail.items"
            :key="item.goodsId"
          >
            <el-image
              style="width: 100px"
              :src="item.productImage"
              fit="fit"
            ></el-image>
            <div>{{ item.productName }}</div>
            <div>数量: X {{ item.quantity }}</div>
          </div>
        </div>
        <div style="margin-top: 10px">
          <el-descriptions title="" :column="3" border>
            <el-descriptions-item
              label="批次号"
              :labelStyle="{ width: '10%' }"
              :contentStyle="{ width: '20%' }"
            >
              {{ supDetail.batchNo }}
            </el-descriptions-item>
            <el-descriptions-item label="发货类型">
              {{ supDetail.deliveryTypeName }}
            </el-descriptions-item>
            <el-descriptions-item label="发货状态">
              <el-tag type="primary">{{ supDetail.stateName }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="物流公司">
              {{ supDetail.logisticsCompany }}
            </el-descriptions-item>
            <el-descriptions-item label="物流单号">
              {{ supDetail.logisticsNumber }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="openDetail = false">确 定</el-button>
        <el-button @click="openDetail = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  deliveryNoteList,
  pendingDeliveryGoods,
  ordership,
  submitSupplier,
  detailSupplier,
} from "@/api/system/orderSuper";
import { showLogistics } from "@/api/order/logistics";
export default {
  data() {
    return {
      tableData: [],
      loading: false,
      openAdd: false,
      formOne: {},
      goodsList: [],
      goodsIds: [],
      // 物流公司列表
      companyList: [],
      // 提交发货单
      openSub: false,
      form: {},
      //发货详情
      openDetail: false,
      supDetail: {},
      rules: {
        logisticsCompany: [
          { required: true, message: "请选择物流公司", trigger: "click" },
        ],
        logisticsNumber: [
          { required: true, message: "请输入物流单号", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleSelectionChange(val) {
      this.goodsIds = val.map((v) => v.id);
    },
    // 判断是否是合并组的第一行（这里假设所有行都属于同一组）
    isFirstRow(index) {
      return index === 0; // 只有第一行显示控件
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 4 || columnIndex === 5) {
        return {
          rowspan: this.goodsList.length,
          colspan: 1,
        };
      } else {
        return {
          rowspan: 1,
          colspan: 1,
        };
      }
    },
    getList() {
      const orderId = this.$route.query.id;
      deliveryNoteList(orderId).then((res) => {
        this.tableData = res.data;
      });
    },
    //物流公司列表
    getListLogistics() {
      showLogistics().then((res) => {
        this.companyList = res.data;
      });
    },
    // 查看发货详情
    handldeDetail(row) {
      const { id } = row;
      detailSupplier(id).then((res) => {
        this.supDetail = res.data;
        this.openDetail = true;
      });
    },
    handldeFahuo(row) {
      const { id } = row;
      this.form = {
        deliveryId: id,
      };
      this.getListLogistics();
      this.openSub = true;
    },
    handleAdd() {
      pendingDeliveryGoods(this.$route.query.id).then((res) => {
        this.goodsList = res.data.goodsList;
        const { orderId } = res.data;
        this.openAdd = true;
        this.goodsIds = [];
        this.formOne = {
          orderId,
        };
      });
    },
    submitForm() {
      const items = [];
      if (this.goodsIds.length) {
        this.goodsList.forEach((v) => {
          if (this.goodsIds.includes(v.id)) {
            const { id: goodsId, buyNum } = v;
            items.push({ goodsId, buyNum });
          }
        });
        this.formOne.items = items;
      }
      ordership(this.formOne, this.formOne.orderId).then((response) => {
        this.$modal.msgSuccess("创建发货单成功");
        this.getList();
        this.openAdd = false;
      });
    },
    // 提交发货单
    submitFahuo() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const { logisticsCode } = this.companyList.filter(
            (c) => c.logisticsName == this.form.logisticsCompany
          )[0];
          this.form = {
            ...this.form,
            logisticsCode,
          };
          submitSupplier(this.form.deliveryId, this.form).then((res) => {
            this.$modal.msgSuccess("提交发货单成功");
            this.getList();
            this.openSub = false;
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.goods-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}
.goods-item {
  text-align: center;
  font-size: 14px;
}
</style>
